<template>
	<view class="login">
		<!-- 消息提示dom -->
		<u-toast ref="uToast"></u-toast>
		<view class="login-main">
			<u-navbar :autoBack="true" bgColor="rgba(255,255,255,0.39)"></u-navbar>
			<view v-if="isUserLogin">
				<view class="login-img">
					<image src="../../static/icons/phone.png" mode=""></image>
					<text>手机号登录</text>
				</view>
				<view class="login-tip">
					首次登录手机号将在验证后生成新账号
				</view>
				<view class="login-phone">
					<input type="tel" placeholder="请输入手机号" v-model="phone" />
				</view>
				<view class="login-btn" @click="getCode" :class="(!isAgree || isDisable) ? 'disable':''">
					<button>发送验证码</button>
				</view>
			</view>
			<view v-else>
				<view class="login-img">
					<image src="../../static/icons/user.png" mode=""></image>
					<text>用户名密码登录</text>
				</view>
				<view class="login-phone">
					<input type="text" placeholder="用户名" v-model="user.uname" />
					<input type="password" placeholder="密码" v-model="user.pwd"/>
					<view class="login-btn" @click="login" :class="(!isAgree || userInfoCheck) ? 'disable':''">
						<button>登录</button>
					</view>
				</view>
			</view>
			<view class="login-user" @click="loginUser">
				{{ isUserLogin ? '用户名密码登录' : '手机号登录' }}
			</view>
			<view class="login-protocol">
				<u-checkbox-group @change="checkboxChange">
					<u-checkbox shape="circle"></u-checkbox>
					<view>我已阅读并同意 <text>服务条款</text> 和 <text>隐私政策</text> </view>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import { userLogin } from '../../api/login.js'
	import { Encrypt } from '../../utils/aes.js'
	import { mapMutations } from 'vuex'
	
	export default {
		data() {
			return {
				isAgree:false,
				isDisable:true,
				phone:'',
				isUserLogin:false,
				user:{
					uname:'test',
					pwd:'123456'
				}
			}
		},
		methods:{
			...mapMutations(['setToken']),
			getCode() {
				if (this.isDisable) {
					uni.showToast({
						title:"请输入正确的手机号码！",
						icon:'error'
					})
					return
				}
				if (!this.isAgree) {
					uni.showToast({
						title:"服务条款与隐私政策未同意！",
						icon:'error'
					})
					return
				}
				uni.navigateTo({
					url:`/pages/login/code?tel=${this.phone}`
				})
			},
			checkboxChange(e) {
				this.isAgree = !!e.length
			},
			loginUser() {
				this.isUserLogin = !this.isUserLogin
			},
			login() {
				userLogin({
					username:Encrypt(this.user.uname),
					password:Encrypt(this.user.pwd)
				}).then(res => {
					if (res.accessToken) {
						// 保存token到Vuex
						this.setToken(res.accessToken)
						// 消息提示
						this.$refs.uToast.show({
							message:'正在登录...',
							type:'loading',
							duration:5000
						})
						// 回到我的页面
						uni.switchTab({
							url:'/pages/tabs/my'
						})
					}
				})
			}
		},
		watch:{
			phone(newVal,oldVal) {
				let reg = /^1[2,3,4,5,6,7,8,9]\d{9}$/
				this.isDisable = !reg.test(this.phone)
			}
		},
		computed:{
			userInfoCheck: function() {
				return !this.user.uname || !this.user.pwd
			}
		}
	}
</script>

<style>
	.login {
		display: flex;
		width: 100vw;
		height: 100vh;
		align-items: center;
		background: rgba(255,245,245,0.39);
	}
	.login-main {
		margin: 0 58rpx;
		flex: 1;
	}
	.login-close image {
		width: 40rpx;
		height: 40rpx;
		padding-bottom: 90rpx;
	}
	.login-img {
		display: flex;
		align-items: center;
	}
	.login-img text {
		margin-left: 22rpx;
		font-size: 56rpx;
		color: #342334;
		font-weight: bold;
	}
	.login-img image {
		width: 83rpx;
		height: 83rpx;
	}
	.login-tip {
		margin-top: 45rpx;
		font-size: 28rpx;
		color: #342334;
		font-weight: 400;
		letter-spacing: 2rpx;
		opacity: 0.53;
	}
	.login-phone {
		margin-top: 121rpx;
		padding: 31	rpx;
	}
	.login-phone input {
		border-bottom: 1px solid #707070;
		height: 80rpx;
	}
	.login-btn button {
		width: 100%;
		height: 100rpx;
		color: #fff;
		background: #337AFF;
		margin-top: 88rpx;
	}
	.login-user {
		margin-top: 10rpx;
		display: flex;
		justify-content: flex-end;
		font-size: 28rpx;
		font-weight: 400;
		color: #343324;
		letter-spacing: 2rpx;
	 }
	.login-protocol {
		margin-top: 68rpx;
	}
	/deep/  .u-checkbox-group--row {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.login-protocol text {
		padding: 0 10rpx;
		color: #337AFF;
		padding-left: 10rpx;
	}
	/* 发送验证码按钮可用状态 */
	.login-btn.disable button {
		background: gray;
	}
</style>